<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title>专利协同服务平台</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/regist.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate-1.13.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/additional-methods.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery_vlid_set.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer.js"></script>
	<script type="text/javascript">
	  $(document).ready(function(){
		  $("#getPhoneCode").click(function(){
	        	  var phonerNumber=$("#phoneNumber").val();
	        	  var errormsg=$("#errormsg"); 
	        	  errormsg.html("<font color='red'></font>");
	        	  var userType=$("#userType")[0].options[$("#userType")[0].selectedIndex].value;
	        	
	        	  if(phonerNumber!= null&& phonerNumber !=""){
	        		  if(userType == 0){
							errormsg.html("<font color='red'>请选择您的角色类型</font>");
						}else{
		        		  $.ajax({  
			                  url:"${pageContext.request.contextPath}/researcher/valid.html", 
			                  type:"post",  
			                  data:{  
			                      "phoneNumber":phonerNumber,
			                      "userType":userType,
			                  },  
			                  dataType:"text",  
			                  success : function(data) {  
			                      if(data=='fail'){  
			                    	  errormsg.html("<font color='red'>该手机号还没有注册</font>");
			                      } else {  
			                    	  time(this);	
			                     } 
			                  }//end success
			              }); //end ajax
		              }
	        	  }else{
	        		  errormsg.html("<font color='red'>请输入手机号</font>"); 
	        	  }
	          });//end click 
	          $('#password').bind('input propertychange',function(){ //添加监听input值的改变事件
	        	  var message = $("#message1");
					message.html("<font color='red'></font>"); 
	        	  var tvalmum;
	        	     //统计input输入字段的长度
	        	   tvalnum = $(this).val().length;
	        	   //如果大于8个字直接进行字符串截取
	        	   if(tvalnum>20){          
	        	     message.html("<font color='red'>密码最大长度为20位，请重新输入</font>");
	        	     $("#button").attr("disabled","disabled");
	        	   }else if(tvalnum<8){
	        		   message.html("<font color='red'>密码不能少于8位字符，请重新输入</font>");
	        		   $("#button").attr("disabled","disabled");
	        	   }else{
	        		   $("#button").removeAttr("disabled");  
	        	   }
	        	});
	          
		  $("#button").click(function(){
			 	if($("#forgetform").valid()){
					var code=$("#code").val();
					var message = $("#message");
					message.html("<font color='red'></font>");
					var codeerrormsg=$("#errormsg");
					codeerrormsg.html("<font color='red'></font>");
					var userType=$("#userType")[0].options[$("#userType")[0].selectedIndex].value;
					if(userType == 0){
						message.html("<font color='red'>请选择您的角色类型</font>");
					} else{
						$.ajax({
					   		type: "POST",
					   		url: "${pageContext.request.contextPath}/researcher/set.html",  
					   		data: $("#forgetform").serialize()+"&userType="+userType,
					   		dataType:'text',
					   		success:function(data) {
					   			if(data=="success"){
					   				layer.msg("找回密码成功,1s后自动跳转到首页");
						   			setTimeout(function() {     //1s后执行 
						   				window.location="${pageContext.request.contextPath}/admin/loginUI.html";
						   	         },1000);
					   			}else if(data=="fail"){
					   				codeerrormsg.html("<font color='red'>验证码输入错误</font>");
					   			}else if(data=="past"){
					   				codeerrormsg.html("<font color='red'>验证码已过期，请重新获取</font>");
					   			}
					   		}	//end success method
					   	});
					} 
			 	}//end if
			});//end click
		  });	//end jquery
	  //按钮倒计时
	  var wait=60;
	  function time(obj){
	 	 if(wait==0) {  
	 		 $("#getPhoneCode").removeAttr("disabled");  
	 		 $("#getPhoneCode").val("获取验证码");  
	         wait = 60;  
	      }else {  
	    	 $("#getPhoneCode").attr("disabled","disabled");  
	    	 $("#getPhoneCode").val(wait+"秒后重试");  
	         wait--;  
	         setTimeout(function() {     //倒计时方法  
	         time(obj);  
	         },1000);   	 //间隔为1s  
	      }  
	  }//end method
	</script>
<style type="text/css">
.logo2{
	margin-left:-40px;
	margin-top: -25px;
}
</style>
</head>
<body>
		
		<div id="contain" class="c_contain">
    	<div id="top" class="c_top" style="background: #015AB8;">
    		<!-- 标题文字 -->
    		<img alt="logo2"
				src="${pageContext.request.contextPath}/images/index_logo2.png"
				class="logo2">
    	</div>
    	<div id="center" class="c_center" >
    		<div  id="id_form" class="panel panel-default">
				<div class="panel-header">>>忘记密码</div>
				<form action="#" method="post" class="form form-horizontal responsive" id="forgetform">
					<div class="panel-body">
						<div class="row cl">
							<label class="form-label col-xs-3">手机：</label>
							<div class="formControls col-xs-8">
								<input style="width: 600px;"
									type="text" class="input-text" autocomplete="off" placeholder="请输入已注册的手机号" name="phoneNumber" id="phoneNumber">
							</div>
						</div>
						<div class="row cl">
							<label class="form-label col-xs-3">验证码：</label>
							<div class="formControls col-xs-8">
								<input style="width: 600px;"	 
									type="text" class="input-text" autocomplete="off" placeholder="请输入验证码" name="code" id="code" />
							</div>
						</div>
						<div class="row cl">
							<div class="formControls col-xs-8">
								<label class="form-label col-xs-3"></label>
								<input style="background: #EBEBE4; border: none;color: #333333; width:150px; margin-left: 135px;"
								 	class="btn btn-primary" type="button" value="获取验证码" id="getPhoneCode"/>
								<span id="errormsg" style="padding-left: 20px; display: inline;"></span>
							</div>
						</div>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-3">新密码：</label>
						<div class="formControls col-xs-8">
							<input style="width: 600px;"
							type="password" class="input-text" autocomplete="off" placeholder="请输入密码-长度8-20位" name="password" id="password">
							
						</div>
						<span id="message1" style="font-size:13px;margin-top:-10px;margin-left:26%;"></span>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-3">确认密码：</label>
						<div class="formControls col-xs-8">
							<input style="width: 600px;"
							type="password" class="input-text" autocomplete="off" placeholder="确认密码" name="password2" id="password2">
						</div>
					</div>
					<div class="row cl">
						<div class="col-xs-8 col-xs-offset-3">
							<input id="button" class="btn btn-primary" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
							 <label  style="margin-left:2%;">
				    	 		<select id="userType">
				   			  		<option value="0" selected="selected">请选择用户角色</option>
				   			  			<c:forEach items="${dicUserTypes}" var="userType">
				   			  	 		<option value="${userType.typeCode}">${userType.description}</option>
				   			  			</c:forEach>
				    	 		</select>
				    		</label>
						</div>
					</div>
					<span id="message" style="font-size:13px;margin-top:-10px;margin-left:26%;"></span>
					</form>
			</div>
    	</div><!-- center结束 -->
    </div>
</body>
</html>